<template>
    <div class="recommend-list">
        <ul>
            <li v-for="v in recommendlist" :key="v.id">
                <div class="list-recommend">
                    <div class="list-recommend-img">
                        <img :src="`/src/assets/images/${v.img1}`" alt="">
                    </div>
                    <div class="list-recommend-title">
                        <div class="list-left-title-top">
                            <h4>{{ v.name }}</h4>

                        </div>

                        <div class="list-recommend-title-middle">
                            <p>{{ v.remark }}</p>
                        </div>
                    </div>
                </div>

            </li>
        </ul>

    </div>

</template>
<script setup>
import { ref } from 'vue'


let recommendlist = ref([
    {
        id: 1,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '1.png',

    },
    {
        id: 2,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '2.png',

    },
    {
        id: 3,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '3.png',

    },
    {
        id: 4,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '1.png',

    },
    {
        id: 5,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '2.png',

    },
    {
        id: 6,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '3.png',

    },
    {
        id: 7,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '1.png',

    },
    {
        id: 8,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '2.png',

    },
    {
        id: 9,
        name: '大学资源网',
        remark: '汇聚全国有值名师资源，分享学习经验，为学员提供最专业的学习资源。',
        img1: '3.png',

    }

])
</script>
